<template>
  <div class="add-suppliers">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/supply_setting' }">供应设置</el-breadcrumb-item>
        <el-breadcrumb-item>新增商家</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form label-width="100px" class="demo-ruleForm">
        <div class="information-page">
        <el-form-item class="information-title">
            <h1>基础信息</h1>
        </el-form-item>
        <div class="basic-information">
          <div class="information-left-page">
            <el-form-item label="公司名称" :required="true">
                <el-input v-model="ruleForm.supplierBaseInfo.company" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="公司类型" :required="true">
                <el-select v-model="ruleForm.supplierBaseInfo.type" placeholder="请选择公司类型">
                <el-option label="企业" :value="0"></el-option>
                <el-option label="旅行社" :value="1"></el-option>
                <el-option label="酒店" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="区域" class="area" :required="true">
                <el-cascader
                :options="cities"
                :props="{ value: 'cityid', label: 'city', children: 'citiess' }"
                v-model="city"
                filterable
                change-on-select
                >
                </el-cascader>
            </el-form-item> 
            <el-form-item label="邮编">
                <el-input v-model="ruleForm.supplierBaseInfo.postcode" placeholder="请输入邮编"></el-input>
            </el-form-item>
            <el-form-item label="公司网址">
                <el-input v-model="ruleForm.supplierBaseInfo.url" placeholder="请输入公司网址"></el-input>
            </el-form-item>
            <el-form-item label="公司简介">
                <el-input type="textarea" v-model="ruleForm.supplierBaseInfo.profile" :rows="4" placeholder="请输入公司简介"></el-input>
            </el-form-item>
          </div>
          <div class="information-right-page">
            <el-form-item label="公司logo" style="margin-bottom: 28px;">
                <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :http-request="sendChange"
                 action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="onFilesAdd">
                <img v-if="ruleForm.supplierBaseInfo.logo" :src="ruleForm.supplierBaseInfo.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <p class="img-content">仅支持JPG, JPEG, BMP, PNG格式, 文件小于10M<br />(建议使用缕空白色图像, 最佳尺寸126 * 45px)</p>
            </el-form-item>
            <el-form-item label="详细地址" :required="true">
                <el-input v-model="ruleForm.supplierBaseInfo.address" placeholder="请输入公司详细地址"></el-input>
            </el-form-item>
            <div style="overflow: hidden;">
                <div class="information-left">
                    <el-form-item label="电话" :required="true">
                        <el-input v-model="ruleForm.supplierBaseInfo.landline" placeholder="请输入公司电话号码"></el-input>
                    </el-form-item>
                </div>
                <div class="information-right">
                    <el-form-item label="传真">
                        <el-input v-model="ruleForm.supplierBaseInfo.fax" placeholder="请输入公司传真"></el-input>
                    </el-form-item>
                </div>
            </div>
            <el-form-item label="邮箱">
                <el-input v-model="ruleForm.supplierBaseInfo.email" placeholder="请输入联系人邮箱"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item class="information-title">
            <h1>财务信息</h1>
        </el-form-item>
        <div class="financial-information">
            <div class="information-left-page">
                <el-form-item label="开户银行">
                    <el-input v-model="ruleForm.financeInfo.banks" placeholder="请输入开户银行"></el-input>
                </el-form-item>
                <el-form-item label="开户支行">
                    <el-input v-model="ruleForm.financeInfo.branch" placeholder="请输入开户支行名称"></el-input>
                </el-form-item>
                <el-form-item label="银行账号">
                    <el-input v-model="ruleForm.financeInfo.banksAccount" placeholder="请输入公司银行账号"></el-input>
                </el-form-item>
                <el-form-item label="发票抬头">
                    <el-input v-model="ruleForm.financeInfo.invoice" placeholder="请输入发票抬头"></el-input>
                </el-form-item>
            </div>
            <div class="information-right-page">
                <el-form-item label="纳税人识别号">
                    <el-input v-model="ruleForm.financeInfo.taxCode" placeholder="请输入纳税人识别号"></el-input>
                </el-form-item>
                <el-form-item label="结算方式" :required="true">
                    <el-select v-model="ruleForm.financeInfo.clearingMode" placeholder="请选择结算方式" @change="modeChange(ruleForm.financeInfo.clearingMode)">
                    <el-option label="日结" :value="0"></el-option>
                    <el-option label="周结" :value="1"></el-option>
                    <el-option label="月结" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="结算时间" :required="true" v-if="clearingTime">
                    <el-select v-model="ruleForm.financeInfo.clearingTime" placeholder="请选择结算时间">
                        <div v-for="item in timeData">
                            <el-option :label="item.label" :value="item.value" v-if="ruleForm.financeInfo.clearingMode === 1">{{item.label}}</el-option>
                            <el-option :label="item" :value="item" v-if="ruleForm.financeInfo.clearingMode === 2">{{item}}</el-option>
                        </div>
                    </el-select>
                </el-form-item> 
            </div>
        </div>
        <el-form-item class="information-title">
            <h1>合作信息</h1>
        </el-form-item>
            <div class="service-support">
                <div class="information-left-page">
                    <div style="overflow: hidden;">
                        <div class="information-left">
                            <el-form-item label="签约人" :required="true">
                                <el-input v-model="ruleForm.contractInfo.contractor" placeholder="请输入签约人姓名"></el-input>
                            </el-form-item>
                        </div>
                        <div class="information-right">
                            <el-form-item label="手机" :required="true">
                                <el-input v-model="ruleForm.contractInfo.contractorPhone" type="number" placeholder="请输入签约人手机号码"></el-input>
                            </el-form-item>
                        </div>
                        <div class="information-left">
                            <el-form-item label="账号" :required="true">
                                <el-input v-model="ruleForm.contractInfo.account" placeholder="请输入账号名称"></el-input>
                            </el-form-item>
                        </div>
                        <div class="information-right">
                            <el-form-item label="角色" :required="true">
                                <el-select v-model="ruleForm.contractInfo.roleId" placeholder="请选择角色">
                                    <div v-for="item in roleData">
                                        <el-option :label="item.name" :value="item.id">{{item.name}}</el-option>
                                    </div>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <el-form-item label="业务合同" style="text-align: left;">
                        <el-upload
                        class="upload-demo"
                        :http-request="downloadChange"
                        :on-change="downloadFilesAdd"
                        :on-remove="handleRemove"
                        multiple
                        :limit="3"
                        :file-list="fileList"
                        :on-exceed="handleExceed">
                        <el-button size="small" type="text" ref="btn">上传</el-button>
                        </el-upload>
                    </el-form-item> 
                    <el-form-item label="合同摘要">
                        <div class="service_person">
                            <div class="item item-first"><label>房型</label></div>
                            <div class="item"><label>底价</label></div>
                            <div class="item"><label>房量</label></div>
                            <div class="item"><label>早餐</label></div>
                        </div>
                        <div class="service-input" v-for="(item,index) in ruleForm.contractInfo.suppliersContracts">
                            <el-input v-model="item.room" class="item-input"></el-input>
                            <el-input v-model="item.floorPrice"></el-input>
                            <el-input v-model="item.roomAmount"></el-input>
                            <el-input v-model="item.breakfast" class="last-input"></el-input>
                            <div class="input-delete" @click="deleteInput(index)"><i class="el-icon-delete" v-show="index !== 0"></i></div>
                        </div>
                        <div class="service-btn">
                            <el-button type="text" @click="addServiceInpput"><i class="el-icon-plus" style="margin-right: 5px;"></i>新增下一行</el-button>
                        </div>
                    </el-form-item>
                </div>
                <div class="information-right-page">
                    <div class="information-left">
                        <el-form-item label="联系人" :required="true">
                            <el-input v-model="ruleForm.contractInfo.userName" placeholder="请输入联系人"></el-input>
                        </el-form-item>
                    </div>
                    <div class="information-right">
                        <el-form-item label="联系人手机" :required="true">
                            <el-input v-model="ruleForm.contractInfo.userPhone" type="number" placeholder="请输入联系人手机"></el-input>
                        </el-form-item>
                    </div>
                    <div class="information-left">
                        <el-form-item label="职位">
                            <el-input v-model="ruleForm.contractInfo.position" placeholder="请输入联系人职位"></el-input>
                        </el-form-item>
                    </div>
                    <div class="information-right">
                        <el-form-item label="QQ">
                            <el-input v-model="ruleForm.contractInfo.qq" placeholder="请输入QQ号码"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </div>
        <div class="information-btn">
            <el-form-item>
                <el-button type="primary" @click="saveForm">保存</el-button>
                <el-button @click="back">取消</el-button>    
            </el-form-item>
        </div>
      </el-form>
  </div>
</template>
<script>
import { getRoleList, addSuppliers, updateQiniu, getUuid, getQiniuPublicToken } from '../../../public/js/setting'
const ButtonFooter = () => import('@/components/common/ButtonFooter')
const cityData = require('@/data/editCities.json')
export default {
  name: 'CompanyInformation',
  data () {
    return {
      timeType: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      region: '',
      timeWeek: '',
      fileList: [],
      contractFile: [],
      cities: cityData.provincesEntities,
      ruleForm: {
        supplierBaseInfo: {
          logo: ''
        },
        financeInfo: {},
        contractInfo: {
          suppliersContracts: []
        }
      },
      clearingTime: true,
      timeData: [
        {label: '周日', value: 7},
        {label: '周一', value: 1},
        {label: '周二', value: 2},
        {label: '周三', value: 3},
        {label: '周四', value: 4},
        {label: '周五', value: 5},
        {label: '周六', value: 6}
      ],
      city: '',
      postData: {},
      roleData: [],
      file: ''
    }
  },
  created () {
    getUuid().then(res => {
      if (res.status === 200) sessionStorage.setItem('uuid', res.data)
    })
    getRoleList().then(res => {
      if (res.data.errCode === 0) this.roleData = res.data.roleEntities
    })
  },
  methods: {
    addServiceInpput () {
      this.ruleForm.contractInfo.suppliersContracts.push({room: '', floorPrice: '', roomAmount: '', breakfast: ''})
    },
    deleteInput (index) {
      this.ruleForm.contractInfo.suppliersContracts.splice(index, 1)
    },
    sendChange (req) {
      getQiniuPublicToken(this).then(res => {
        if (res.data.errCode === 0) return res.data.qnInfo
      }).then(res => {
        const formData = new FormData()
        formData.append('file', req.file)
        formData.append('token', res)
        formData.append('key', window.commo.uuid + '_' + this.file.name)
        updateQiniu(formData).then(res => {
          this.ruleForm.supplierBaseInfo.logo = window.commo.qiniuImageUrl + res.data.key
        })
      })
    },
    onFilesAdd (file, filelist) {
      this.file = file
    },
    modeChange (value) {
      if (value === 0) {
        this.clearingTime = false
      } else if (value === 1) {
        this.clearingTime = true
        this.timeData = [{label: '周日', value: 7}, {label: '周一', value: 1}, {label: '周二', value: 2}, {label: '周三', value: 3}, {label: '周四', value: 4}, {label: '周五', value: 5}, {label: '周六', value: 6}]
      } else {
        this.timeData = 31
        this.clearingTime = true
      }
    },
    handleRemove (file, fileList) {
      this.fileList = fileList
      if (this.fileList.length) {
        if (this.fileList.length > 0) this.files = true
      } else {
        this.files = false
      }
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    saveForm () {
      this.ruleForm.supplierBaseInfo.area = parseInt(this.city[this.city.length - 1])
      if (this.ruleForm.financeInfo.clearingMode === 0) this.ruleForm.financeInfo.clearingTime = 0
      this.ruleForm.contractInfo.contractFiles = []
      if (this.fileList.length > 0) {
        this.fileList.forEach(item => {
          this.ruleForm.contractInfo.contractFiles.push({fileId: item.url, fileName: item.name})
        })
      }
      addSuppliers(this.ruleForm).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success('添加商家成功')
          this.$router.go(-1)
        }
      })
    },
    back () {
      this.$router.go(-1)
    },
    downloadChange (req) {
      this.file.name = req.file.name
      getQiniuPublicToken(this).then(res => {
        if (res.data.errCode === 0) return res.data.qnInfo
      }).then(res => {
        const formData = new FormData()
        formData.append('file', req.file)
        formData.append('token', res)
        formData.append('key', window.commo.uuid + '_' + req.file.name)
        this.fileList = []
        updateQiniu(formData).then(res => {
          if (res.status === 200) {
            this.fileList.push({name: res.data.key, url: window.commo.qiniuImageUrl + res.data.key})
            if (this.fileList.length) {
              if (this.fileList.length > 0) this.files = true
            } else {
              this.files = false
            }
          }
        })
      })
    },
    downloadFilesAdd (file, filelist) {
      this.file = file
    }
  },
  components: {
    ButtonFooter
  }
}
</script>
<style lang="scss" scoped>
.download-file {
    position: absolute;
    top: 0;
    left: 30%;
    color: #409EFF; 
    z-index: 9999; 
    font-size: 12px;
}
.add-suppliers {
    margin-bottom: 63px;
    .el-form {
        margin-top: 10px;
        background-color: white;
        overflow: auto;
        .information-page {
            padding: 20px;
            .basic-information, .financial-information, .service-support {
                overflow: hidden;
                .information-left-page {
                    width: 47%;
                    float: left;
                }
                .information-right-page {
                    width: 47%;
                    float: right;
                }
            }
            .basic-information {
                .information-left-page {
                    .information-title {
                        .el-form-item__content {
                            margin-left: 0!important;
                        }
                    }
                    .area {
                        text-align: left;
                    }
                }
            }
            h1 {
                color: #6d2377;
                text-align: left;
            }
        }
    }
}

.information-left {
    width: 50%;
    float: left;
}
.information-right {
    width: 50%;
    float: left;
}
.service_person {
    width: 100%;
    height: 40px;
    background-color: #eef1f9;
    margin-bottom: 10px;
    .item-first {
        width: 40%!important;
    }
    .item {
        width: 20%;
        float: left;
        text-align: left;
        label {
            font-size: 12px;
            margin-left: 10px;
        }
    }
}
.service-input {
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
    .item-input {
        width: 40%!important;
    }
    .input-delete {
        position: absolute;
        top: 0;
        right: -25px;
    }
    .el-input {
        width: 20%;
        float: left;
        text-align: left;
        .el-input__inner {
            width: 90%;
        }
    }
    .last-input {
        .el-input__inner {
            width: 100%;
        }
    }
}
.service-btn {
    text-align: left;
}
  .el-select, .el-cascader {
      display: block;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 100%;
  }

  .information-left-page {
      .el-upload {
          display: block;
          text-align: left;
          .el-button+.el-button {
              margin-left: 30%;
          }
          
      }
  }
  .el-upload-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 30%;
    }
    
</style>
